.appGuide {
    z-index: 999999;
    position: fixed; 
    transition: all 1s;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    border:1px solid #dedede;
    .outer {
        overflow:hidden;
    }
    .inner{
        min-width: 450px;
        .bg {
            background:#fafafa;
            padding: 30px;
        }
    }
    .siderBar {
        position: absolute;
        width: 20px;
        top: 50%;
        left: -20px;
        transform: translate(-0%, -50%);
        background: #1890ff;
        opacity:0.4;
        text-align: center;
        cursor:pointer;
        color: #fff;
        font-size: 12px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        

    }
    .close {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .title{
        margin-bottom: 16px;
    }
    .category{
        margin-bottom: 24px;
    }
    .item {
        display: inline-block;
        margin-right: 24px;
    }
    .btns {
        text-align: center;
        padding-top: 30px;
    }
}
.mask {
    transition: all 1s;
}
.statusOpen {
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%); 
    background: '#fff';
    width: 600px;
    height:450px;
    .siderBar {
        display: none;
    }
    .mask {
        opacity: 1;

    }
}

.statusClose {
    width:200px;
    height: 450px;
    top: 50%;
    left: 100%;
    transform:translateY(-50%);
    background: '#fff';
    .title {
        display: inline-block;
    }
    .btns {
        display: none;
    }
    .mask {
        opacity: 0;
        
    }
}

